<template>
  <div class="_wrap">
    <table-scroll-pro
      :data="tableData"
      :columns="columns"
      :config= "config"
      :class-option="classOption"
      @row-click="rowClick">
    </table-scroll-pro>
  </div>
</template>

<script>
  export default {
    name: 'itemRightBottom',
    components: {},
    data() {
      return {
        tableData:[
          { name: '幼儿园', school: 152, building: 565, classroom: 512, sDorm: 0, tDorm: 0 },
          { name: '小学', school: 81, building: 852, classroom: 3888, sDorm: 342, tDorm: 320 },
          { name: '初中', school: 33, building: 652, classroom: 1188, sDorm: 541, tDorm: 343 },
          { name: '高中', school: 12, building: 562, classroom: 1082, sDorm: 565, tDorm: 232 },
          { name: '中职', school: 0, building: 0, classroom: 0, sDorm: 0, tDorm: 0 },
          { name: '其他', school: 0, building: 0, classroom: 0, sDorm: 0, tDorm: 0 }
        ],
        columns: [
          { label: '学段', prop: 'name', minWidth: 50, align: 'center', showOverflowTooltip: true },
          { label: '学校数(所)', prop: 'school', width: 72, align: 'center' },
          { label: '建筑物(个)', prop: 'building', width: 72, align: 'center' },
          { label: '教室(个)', prop: 'classroom', width: 72, align: 'center' },
          { label: '学生宿舍(个)', prop: 'sDorm', width: 72, align: 'center' },
          { label: '教师宿舍(个)', prop: 'tDorm', width: 72, align: 'center' }
        ],
        classOption: {
          // autoPlay: false,
          singleHeight: 52, // 单步运动停止的高度(默认值0是无缝不停止的滚动)
          waitTime: 2000, // 单步停止等待时间(默认值1000ms)
        },
        config:{
          rowHeight: 50 + 'px',
          headerHeight: 66 + 'px',
          rowBGC: 'rgba(7,124,220,.16)',
          stripeBGC: 'rgba(7,124,220,.04)'
        },
      }
    },
    mounted() {
    },
    methods: {
      rowClick(row, column){
        console.log(row, column, column.$index)
      },
    }
  }
</script>

<style scoped lang="scss">
  ._wrap {
    width: 100%; height: 100%;
  }
</style>
